<template>
	<div>
		<el-card>
			<Positionchangehead />
			<vxe-table
				border
				resizable
				:align="'center'"
				show-overflow
				keep-source
				ref="xTable"
				:loading="demo1.loading1"
				:data="tableData"
				:edit-config="{ trigger: 'manual', mode: 'row' }"
			>
				<vxe-table-column type="seq" width="60"></vxe-table-column>
				<vxe-table-column field="staffName" title="姓名"></vxe-table-column>
				<vxe-table-column field="staffDepartment" title="部门" :edit-render="{ name: '$select', options: demo1.departmentList }"></vxe-table-column>
				<vxe-table-column field="staffJob" title="职位" :edit-render="{ name: '$select', options: demo1.jobList }"></vxe-table-column>
				<vxe-table-column field="staffAge" title="年龄"></vxe-table-column>
				<vxe-table-column title="操作">
					<template #default="{ row }">
						<template v-if="$refs.xTable.isActiveByRow(row)">
							<vxe-button @click="saveRowEvent(row)">保存</vxe-button>
							<vxe-button @click="cancelRowEvent(row)">取消</vxe-button>
						</template>
						<template v-else>
							<vxe-button @click="editRowEvent(row)">编辑</vxe-button>
						</template>
					</template>
				</vxe-table-column>
			</vxe-table>
		</el-card>
	</div>
</template>
<script lang="ts">
import Positionchangehead from '/@/views/transfer/position_change/head.vue';
import { reactive, ref, defineComponent } from 'vue';
import { VXETable, VxeTableInstance, VxeTablePropTypes } from 'vxe-table';
import { ElMessage } from 'element-plus'
import axios from 'axios';
export default {
	name: 'position_change',
	components: { Positionchangehead },
	setup() {
		const xTable = ref({} as VxeTableInstance);

		const demo1 = reactive({
			loading1: false,
			departmentList: [
				{ label: '产品开发部', value: '0' },
				{ label: '财务部', value: '1' },
				{ label: '公关部', value: '2' },
				{ label: '人事部', value: '3' },
				{ label: '项目部', value: '4' },
				{ label: '管理部', value: '5' },
			],
			jobList: [
				{ label: '程序员', value: '0' },
				{ label: '产品经理', value: '1' },
				{ label: '项目组长', value: '2' },
				{ label: '会计', value: '3' },
				{ label: '公关', value: '4' },
				{ label: '人事部经理', value: '5' },
				{ label: '企业负责人', value: '6' },
				{ label: '1号员工', value: '7' },
			],
		});

		const isActiveStatus = (row: any) => {
			const $table = xTable.value;
			return $table.isActiveByRow(row);
		};

		const editRowEvent = (row: any) => {
			const $table = xTable.value;
			$table.setActiveRow(row);
		};

		const saveRowEvent = () => {
			const $table = xTable.value;
			$table.clearActived().then(() => {
				demo1.loading1 = true;
				setTimeout(() => {
					demo1.loading1 = false;
					VXETable.modal.message({ message: '职位变动成功！', status: 'success' });
				}, 300);
			});
		};

		const cancelRowEvent = (row: any) => {
			const $table = xTable.value;
			$table.clearActived().then(() => {
				// 还原行数据
				$table.revertData(row);
			});
		};

		return {
			xTable,
			demo1,
			isActiveStatus,
			editRowEvent,
			saveRowEvent,
			cancelRowEvent,
		};
	},
	data() {
		return {
			tableData: '',
		};
	},
	mounted: function () {
		this.searchStaff();
	},
	methods: {
		searchStaff() {
			var that = this;
			axios
				.get('http://121.41.117.22:8081/staff-archives/findAll')
				.then(function (response) {
					//console.log(response.data);
					that.tableData = response.data;
				})
				.catch(function (err) {});
		},
	},
	computed: {},
};
</script>
<style lang="scss">
</style>
